<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>WebSoket Demo</title>

        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script type="text/JavaScript">

            var ddd = function(str){
              return eval("(" + str + ")");
          	}


            // tips: WebSocket 调试脚本
            var WebSocket = WebSocket || window.WebSocket || window.MozWebSocket;
            // 验证浏览器是否支持WebSocket协议
            if (!WebSocket) {
                alert("WebSocket not supported by this browser!");
            }
            else {
                var g_ws = null;

                function Display() {
                    // 载入上次记录的数据
                    console.log("websocket 测试");
                }

                var log = function (s) {
                    if (document.readyState !== "complete") {
                        log.buffer.push(s);
                    } else {
                        document.getElementById("contentId").value += (s + "\n");
                    }
                }

                function CreateConnect () {
                    var msg = document.getElementById("wsUrlId");
                    console.log("CreateConnect(), url: " + msg.value);
                    if (g_ws == null) {
                        var wsUrlValue = msg.value;

                        try {
                            g_ws = new WebSocket(wsUrlValue);
                            // 监听消息
                            g_ws.onmessage = function (event) {
                                console.log(ddd(event.data));

                                log("onmessage(), 接收到服务器消息: " + event.data);
                            };
                            // 打开 WebSocket
                            g_ws.onclose = function (event) {
                                log("onclose(), Socket 已关闭!");
                                g_ws = null;
                            };
                            // 打开WebSocket
                            g_ws.onopen = function (event) {
                                // 发送一个初始化消息
                                log("onopen(), Socket 连接成功!");
                            };
                            g_ws.onerror = function (event) {
                                log("onerror(), Socket 发生错误!");
                            };
                        }
                        catch (e) {
                            g_ws = null;
                            log("连接异常, 重置 websocket");
                        }
                    }
                }



                function SendMsg() {




                    var msg = document.getElementById("messageId");

                    var messageObj = {message:msg,type:'default',};
                    var messageJson = JSON.stringify(messageObj);

                    if (g_ws != null) {
                        //alert(msg.value);
                        log("发送 Socket 消息: " + msg.value);
                        g_ws.send(messageJson);
                    }
                    else {
                        log("Socket 还未创建!, msg: " + msg.value);
                    }
                }

                function CloseConnect () {
                    console.log("CloseConnect()");
                    if (g_ws != null) {
                        g_ws.close();
                    }
                }

                setInterval("ping()",3000);

                function ping(){

                                    var messageObj = {type:'ping'};
                                    var messageJson = JSON.stringify(messageObj);
                                    g_ws.send(messageJson);
                }

                function getInfo()
                {

                  var user_id = document.getElementById("user_id");
                  var order_id = document.getElementById("order_id");
                  var goods_id = document.getElementById("goods_id");

                  var messageObj = {type:'info',user_id:1249,order_id:10542,goods_id:3222};
                  var messageJson = JSON.stringify(messageObj);
                  g_ws.send(messageJson);
                }
				}

                function done(){
                  var messageObj = {type:'done',order_id:10542};
                  var messageJson = JSON.stringify(messageObj);
                    if (g_ws != null) {
                        g_ws.send(messageJson);
                    }
                    else {
                        log("Socket 还未创建!, msg: " + msg.value);
                    }
                }

                function touch(){
                  var messageObj = {type:'touch',order_id:10542,user_id:1249,goods_id:3222,bottle_id: 1};
                  var messageJson = JSON.stringify(messageObj);
                    if (g_ws != null) {
                        g_ws.send(messageJson);
                    }
                    else {
                        log("Socket 还未创建!, msg: " + msg.value);
                    }
                }
                  //$result = self::cloud($respond['game_id'],$respond['level_num'],$respond['life_num'],$respond['game_num']);

                function cloud(){
                  var messageObj = {type:'cloud',game_id:1,level_num:1};
                  var messageJson = JSON.stringify(messageObj);
                    if (g_ws != null) {
                        g_ws.send(messageJson);
                    }
                    else {
                        log("Socket 还未创建!, msg: " + msg.value);
                    }
                }
        </script>
    </head>

    <body onload="Display()" class="container">
        <div id="valueLabel" class="form-group"></div>
            <textarea  class="form-control" rows="20" cols="30" id="contentId"></textarea>
        <br/>

        <div class="form-group">
          <input  class="form-control" name="wsUrl" id="wsUrlId" value="ws://192.168.1.126:7272"/>

        </div>

        <input  class="form-control" name="message" id="messageId" value="Hello, Server!"/>

        <!-- <button class="btn btn-primary"  onClick="javascript:register()">register</button> -->


        <hr>
        <div class="form-group">

          <button  class="btn btn-info btn-block" id="createButton" onClick="javascript:CreateConnect()">连接</button>

          <button class="btn btn-info btn-block" id="sendButton" onClick="javascript:SendMsg()">发送消息</button>

          <button  class="btn btn-info btn-block" id="closeButton" onClick="javascript:CloseConnect()">关闭</button>

          <button class="btn btn-info btn-block" id="sendButton" onClick="javascript:getInfo()">获取关数，次数，命数信息</button>

          <button class="btn btn-info btn-block" id="sendButton" onClick="javascript:touch()">撞到瓶子</button>

          <button class="btn btn-info btn-block" id="sendButton" onClick="javascript:cloud()">撞到云</button>

          <button class="btn btn-info btn-block" id="sendButton" onClick="javascript:done()">结算</button>


        </div>
    </body>
</html>
